<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <title>datePicker.js</title>
    <link rel="stylesheet" href="./datePicker.css">
</head>

<body>
    <div class="mf-picker">
        <div class="mf-picker-panel">
            <div class="mf-picker-choose border-bottom-1px">
                <span class="cancel">取消</span>
                <span class="confirm">确定</span>
                <h1 class="mf-picker-title">选择时间</h1>
            </div>
            <div class="mf-picker-content">
                <div class="mask-top border-bottom-1px"></div>
                <div class="mask-bottom border-top-1px"></div>
                <div class="wheel-wrapper">
                    <div class="wheel">
                        <ul class="wheel-scroll diff">
                        </ul>
                    </div>
                    <div class="wheel">
                        <ul class="wheel-scroll">
                        </ul>
                    </div>
                    <div class="wheel">
                        <ul class="wheel-scroll">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mf-picker-footer"></div>
        </div>
    </div>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            datePicker({
                afterDay: 0, // 第几天后开始可以预约，默认是今天
                appointDays: 7, // 默认可以预约未来7天
                minuteLater: 20, // 当天的话，默认只能预约20分钟之后,如果两个小时就填120
                hourArea: [9, 22], // 预约小时可选的范围，默认是9：00-22：00
                interval: 1, // 分钟的间隔，默认一分钟
                callBack: function(timeStr, timeStamp) { // 点击确认获取到的时间戳和时间字符串
                    console.log(timeStr, timeStamp)
                }
            })
        }, false)
    </script>
</body>

</html>